<!--  -->
<template>
  <div class="invoiceManage">
    <div class="filter">
      <InvoiceManageFilter @filterTable="refreshTable" />
    </div>
    <div class="main">
      <el-descriptions :column="3" border>
        <el-descriptions-item :span="1" :labelStyle="labelStyle" :contentStyle="contentStyle">
          <template slot="label">总订单数</template>
          {{ orderInfo.total }} (单)
        </el-descriptions-item>
        <el-descriptions-item :span="1" :labelStyle="labelStyle" :contentStyle="contentStyle">
          <template slot="label">总金额</template>
          {{ orderInfo.money }} (元)
        </el-descriptions-item>
        <el-descriptions-item v-if="false" :span="1" :labelStyle="labelStyle" :contentStyle="contentStyle">
          <template slot="label">总重量</template>
          {{ orderInfo.weight }} (吨)
        </el-descriptions-item>
      </el-descriptions>
      <div class="tool">
        <el-button class="btn" size="small" type="primary" @click="getSelection()">申请开票</el-button>
      </div>
      <el-table border resizable  v-loading="tableLoading" ref="multipleTable" :data="tableData" height="470" tooltip-effect="dark"
        style="width: 100%">
        <el-table-column type="selection" width="55" align="center" :selectable="selectable"
          :reserve-selection="false"></el-table-column>
        <el-table-column prop="add_id" label="运单号" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.add_id + '-' + scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="invoice_no" label="发票号" align="center"></el-table-column>
        <el-table-column prop="company_name" :show-overflow-tooltip="true" label="公司名称" align="center"
          width="100"></el-table-column>
        <!-- <el-table-column prop="shxydm" label="税号" align="center"></el-table-column> -->
        <el-table-column prop="price" label="总金额(元)" align="center" width="120"></el-table-column>
        <el-table-column prop="money_bill" label="含税金额(元)" align="center" width="120"></el-table-column>
        <el-table-column prop="sj_name" label="司机姓名" align="center" width="80">
          <template slot-scope="scope">
              {{ $maskString(scope.row.sj_name) }}
          </template> 
        </el-table-column>
        <el-table-column prop="cph" label="车牌号" align="center" ></el-table-column>
        <el-table-column prop="shkg" label="收货重量(吨)" align="center" ></el-table-column>
        <el-table-column prop="unit_price" label="单价" align="center" width="80"></el-table-column>
        <el-table-column prop="ship_address" :show-overflow-tooltip="true" label="起运地" align="center"></el-table-column>
        <el-table-column prop="to_address" :show-overflow-tooltip="true" label="目的地" align="center"></el-table-column>
        <el-table-column prop="add_time" :show-overflow-tooltip="true" label="审核时间" align="center"></el-table-column>
        <el-table-column prop="pay_time" :show-overflow-tooltip="true" label="支付时间" align="center"></el-table-column>

        <el-table-column prop="is_invoice" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.is_invoice == 0" style="color: red">待申请</span>
            <span v-if="scope.row.is_invoice == 1" style="color: blue">申请中</span>
            <span v-if="scope.row.is_invoice == 2" style="color: green">已开票</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="$pageSizeList" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
      <el-dialog class="dialog" title="申请开票" :close-on-click-modal="false" :visible.sync="dialogVisible" width="40%">
        <InvoiceDialog v-if="dialogVisible" :rows="rows" @closeDialog="closeDialog" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import InvoiceManageFilter from "./components/invoiceManageFilter";
import InvoiceDialog from "./components/invoiceDialog";
import { invoicesList } from "@/api/businessUser/moneyManagment.js";
export default {
  name:'invoiceManage',
  //import引入的组件需要注入到对象中才能使用
  components: {
    InvoiceManageFilter,
    InvoiceDialog
  },
  data() {
    //这里存放数据
    return {
      dialogVisible: false,

      currentPage: 1,
      pageSizeList: [10, 20, 30, 40],
      total: 0,
      pageSize: 10,

      tableLoading: true,
      labelStyle: { "text-align": "center", "font-weight": "bold" },
      contentStyle: {
        color: "#444",
        "font-weight": "bold",
        "min-width": "200px"
      },
      orderInfo: {}, //运单总信息
      tableData: [],
      filterData: {}, //筛选数据
      rows: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.refreshTable();
  },
  //方法集合
  methods: {
    //关闭支付详情弹框
    closeDialog() {
      this.dialogVisible = false;
      //重新刷新表格
      this.currentPage = 1;
      this.refreshTable();
      //更新账户信息
      this.$store.dispatch("user/setAccountBalance");
    },
    async refreshTable(filterData) {
      this.tableLoading = true;
      if (filterData) {
        //存在筛选数据
        this.filterData = filterData || {};
        this.currentPage = 1;
      } else if (filterData === false) {
        //重置数据
        this.filterData = {};
        this.currentPage = 1;
      }

      let result = await invoicesList({
        ...this.filterData,
        pageSize: this.pageSize,
        page: this.currentPage
      });
      this.tableLoading = false;

      if (result.code == 200) {
        this.tableData = result.data.list || [];
        this.total = result.data.count;
        this.orderInfo.total = result.data.count;
        this.orderInfo.money = result.data.money;
        this.orderInfo.weight = result.data.weight;
      }
    },
    async getSelection() {
      let rows = this.$refs.multipleTable.selection;

      if (!rows.length) {
        this.$message.error("请选择要操作的项");
        return;
      }
      //判断是否存在已转账数据
      if (rows.some(item => item.is_invoice != 0)) {
        this.$message.error("存在已开票订单，请重新选择");
        return;
      }
      this.rows = rows;
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.refreshTable();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.refreshTable();
    },
    //判断勾选
    selectable(row, index) {
      if (row.is_invoice == 0) {
        return true;
      } else {
        return false;
      }
    },
  }
};
</script>
<style lang='scss' scoped>
.invoiceManage {
  padding: 10px;
  background: #fff;

  .header {
    color: $theme-Danger;
    font-weight: bold;
    margin-bottom: 10px;

    .t1 {
      margin-right: 20px;
    }
  }

  .main {
    .block {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }

    .tool {
      border-left: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
      padding: 5px;
      background: #fafafa;
    }
  }
}

::v-deep .el-dialog__header {
  padding-top: 10px;
  padding-left: 20px;
}

::v-deep .el-dialog {
  height: 60vh;
  overflow: hidden;

  .el-dialog__body {
    height: calc(88vh - 40px);
    overflow: auto;
  }
}
</style>
